<template>
    <div class="skeleton">
        <div class="skeleton-item" 
            v-for="item in rows" 
            :key="item" 
            :class="{ani_class:ani}"
            :style="'width:calc('+random_width()+'% - 20px)'"></div>
    </div>
</template>
<script>
export default {
    name:'g-skeleton',
    props:{
        rows:{
            type:Number,
            default:3
        },
        ani:{
            type:Boolean,
            default:false
        }
    },
    setup(props) {
        let random_width = ()=>{
            let result = Math.ceil((Math.random() * 31) + 69);
            return result;
        }
        return {
            random_width
        }
    }
}
</script>
<style scoped>
    .skeleton{
        width: 100%;
        padding: 10px 0;
        margin: 0px 0;
        position: relative;
    }

    .skeleton-item {
        margin-bottom: 30px;
        width: calc(100% -20px);
        height: 20px;
        background: linear-gradient(to left, #ebebeb, #fcfcfc,#ebebeb, #f1f1f1);
        background-size: 250% 250%;
        border-radius: 3px;
        
    }
    .ani_class{
        animation: skeleton_ani 3.5s ease infinite;
    }

    /* 动画，控制背景 background-position */
    @keyframes skeleton_ani {
        0% {background-position: 0% 0%;}
        50% {background-position: 100% 0%;}
        100% {background-position: 0% 0%;}
    }

</style>